<template>
  <div class="username">
     <van-nav-bar
       title="修改称呼"
       left-arrow
       @click-left="onClickLeft"
     />
     <input type="text" placeholder="请输入您的称呼" v-model="name">
     <p>好名字可以让您的生意伙伴更容易记住您哦</p>
     <span @click="finish">完成</span>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { modifyUserInfo } from "../utils/api.js";
 import {useStore} from "vuex"
export default {
 setup(){
   const router=useRouter();
   const store=useStore();
   const onClickLeft = () =>{
       router.push('/personalinfo'); 
   };
   //双向绑定input的内容
   const name=ref('');
   //需要传的参数
   const modify=ref({
      user_nickname:'',
      token:'',
    });

    //点击完成，修改数据并跳转到个人信息页
   const finish=async ()=>{
      if(localStorage.getItem('userToken')){
        modify.value.user_nickname=name;
        modify.value.token=localStorage.getItem('userToken'); 
        const data = await modifyUserInfo(modify.value);
        if(data.status===0){
          router.push('/personalinfo');
          store.state.userInfo.user_nickname=modify.value.user_nickname;
        }
      }
   };
    return { onClickLeft,finish,modify,name}
 }
};
</script>
<style lang="scss" scoped>
.username{
    text-align:center;
    font-size:16px;
  input{
    height:40px;
    width:85%;
    border-radius: 20px;
    margin: 40px 7.5% 20px;
    outline-color: none;
    border:0;
    text-align:center;
    background: rgb(228, 225, 225);    
  }
  span{
    display:inline-block;
    width:70%;
    height:40px;
    line-height:40px;
    border-radius: 20px;
    margin:50px 15% 0;
    background: rgb(83, 182, 140);
    color:#fff;
  }
}
</style>
